<div id="stylized" class="myform">
    <form name="create_path" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post">
        <h1>Tạo lộ trình - Bước 1</h1>
        <p>This is the basic look of my form without table</p>
        <label>Tiêu đề lộ trình
            <span class="small">Add your name</span>
        </label>
        <input type="text" name="title" id="title"/>

        <label>Lĩnh vực
            <span class="small">Add a valid address</span>
        </label>
        <select name="field_id" id="field_list">
            <?php if (isset($field_list)): foreach ($field_list as $field): ?>
                    <option value="<?php echo $field['id']; ?>"><?php echo $field['field_title']; ?></option>
                    <?php
                endforeach;
            endif;
            ?>
        </select>

        <label>Thiết lập quyền
            <span class="small">Thiết lập quyền</span>
        </label>
        <select name="permission">
            <option value="0">Không có quyền gì cả</option>
            <option value="1" selected="selected">Được chỉnh sửa</option>
        </select>

        <label>Chủ đề
            <span class="small">Ví dụ:</span>
        </label>
        <div id="select_tag">
            <input id="suggest_tag" name="suggest_tag" type="text"  class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true"/>
            <ul id="added_tags"></ul>
            <div id="div_tags"></div>
            <button class="with_text" type="button" id="add_tag"  name="add_tag" onClick="add_tags()" >Thêm</button>
        </div>

        <label>Nội dung
            <span class="small">Min. size 6 chars</span>
        </label>
        <textarea name="description" id="description"></textarea>

        <input type="submit" name="mySubmit" value="Bước tiếp theo" />
        <div class="spacer"></div>
    </form>
</div>

<script>    
    //    $("#suggest_tag").keyup(function(event){
    //        var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
    //        if(keyCode == 13){
    //            add_tags();
    //            event.preventDefault();
    //        }
    //    });

    $.ajax({
        url: "get_tag_list",
        dataType: "xml",
        success: function( xmlResponse ) {
            var data = $( "tag", xmlResponse ).map(function() {
                return {
                    value: $( "tagTitle", this ).text()
                };
            }).get();
            $( "#suggest_tag")
            // don't navigate away from the field on tab when selecting an item
            .bind( "keydown", function( event ) {
                if ( event.keyCode === $.ui.keyCode.TAB &&
                    $( this ).data( "autocomplete" ).menu.active ) {
                    event.preventDefault();
                }
            })
            .autocomplete({
                source: data,
                minLength: 0
            });
        }
    });
    function add_tags() {
        var addedTag = document.createElement("li");
        addedTag.innerHTML = $("#suggest_tag").val();
        var tag = document.createElement("input");
        tag.type = "hidden";
        tag.name = "tags[]";
        tag.value= $("#suggest_tag").val();
        document.getElementById("added_tags").appendChild(addedTag);
        document.getElementById("div_tags").appendChild(tag);
        $("#suggest_tag").val("");
    }
</script>